Multi-column confusion

tl;dr: Be careful when using multi-column layout.

Today I was finishing up a small portion of a project which involves generating PDFs with a multi-column layout from web content. Since we’re using the Prince formatter for the PDFs, there are no worries there, as Prince is one of the finest rendering engines out there, especially for this kind of thing.

But since I also created a live preview so the client can see their text in the intended layout while typing, I tested in some major desktop browsers. I was in in for a big surprise.

For anyone familiar with CSS Multi-column layout, the spec says basically—if I understand it correctly—that if no height is specified on the element containing the text columns, then the text should be distributed amongst these columns so that they are of (roughly) equal height. The value for this behavior is balance. If a height is specified, then the browser should use the value of the column-fill property, if it has been specified. If there is no column-fill property, then the browser should still balance the columns. Go ahead and read that again. I’ll wait.

I had set a height on my container. So I was confused about the fact that Chrome/Safari and Firefox were applying auto where they should have been applying balance.

A column-fill value of auto means that the browser should fill the columns in sequence, starting with the first column and filling it, then column two, etc. until there is no remaining text. The browser can do this because it knows the height of the column container. So the spec makes perfect sense, but I was scratching my head at this point. I had specified a height, but not column-fill. Every browser should have used balance, but only Opera did.

Well, I’m thinking it’s me, then I’m thinking it’s not me, so I tweet about it. Fellow CSS layout fan (and author of The Book of CSS3) Peter Gasston and I started chatting about it and tonight we jumped on GTalk and starting testing. Turns out the answer is quite simple: Peter starts off by telling me how Firefox and the Webkit browsers haven’t fully implemented the spec yet. I should have known that, but I didn’t, like an idiot. And it’s logical because the spec is obviously not finished yet.

But even after knowing that, it’s still pretty confusing, because which behavior conforms to the spec right now and which doesn’t? What’s supposed to happen when? I mapped my tests out in the form of two small comparison tables. They might look confusing, but they really aren’t. It’s pretty easy to figure out what you’d need to do to get either balance or auto. Even when the spec is implemented, it’s still useful to know under what conditions each of these values will be acted upon.

Multi-column column-fill defaults, when column-fill is not explicitly specified.

	Opera	Firefox	Chrome/Safari
No explicit height on container	balance	balance	balance
Explicit height on container	balance	auto *	auto *

Multi-column column-fill behavior when column-fill property is explicitly specified.

	Opera	Firefox	Chrome/Safari
column-fill: balance; (container height specified)	balance	auto *	auto *
column-fill: balance; (No container height specified)	balance	balance	balance
column-fill: auto; (container height specified)	auto	auto	auto
column-fill: auto; (No container height specified)	balance	balance	balance

As far as Peter and I can tell, the only behavior which does not conform to the spec is marked in red and with an asterisk. The rest seems (to me) to conform to the spec.

Again, I’ve run into this kind of thing because I’m knowingly using a spec which is not fully implemented. If you do the same, please realize that things can go wrong, and that you’re basically working with a work-in-progress. It might change, and you might have to change your code in the future. If you do use Multi-column now, please use it as a progressive enhancement. And don’t forget to use all the necessary vendor prefixes so that we all may live in peace and harmony.

As always, have fun!